<template>
	<view class="medical-assessment-container">
		<!-- 辅助诊断部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-icon">
					<image src="/static/svg/icon-risk.svg" mode="aspectFit"></image>
				</view>
				<text class="section-title">辅助诊断</text>
			</view>
			<view class="section-content">
				<view class="risk-assessment">
					<uni-icons type="circle-filled" :size="22" color="#0083ff"></uni-icons>
					<text class="risk-text">
						肝硬化急性消化道出血患者院内死亡风险评估
					</text>
				</view>
			</view>
		</view>

		<!-- 智能评估部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-icon">
					<image src="/static/svg/icon-ai.svg" mode="aspectFit" style="width: 18px; height: 18px"></image>
				</view>
				<text class="section-title">智能评估</text>
			</view>
			<view class="section-content">
				<uni-forms ref="form" :model="formData" :rules="rules" label-width="140px" label-position="left">
					<!-- 糖尿病选择 -->
					<uni-forms-item name="diabetes" label="糖尿病" required>
						<uni-data-select v-model="formData.diabetes" :localdata="diseaseOptionsData" placeholder="请选择"/>
					</uni-forms-item>

					<!-- 肝细胞癌选择 -->
					<uni-forms-item name="hepatocellularCarcinoma" label="肝细胞癌" required>
						<uni-data-select v-model="formData.hepatocellularCarcinoma" :localdata="diseaseOptionsData"
							placeholder="请选择"  />
					</uni-forms-item>

					<!-- 血清总胆红素 -->
					<uni-forms-item name="serumTotalBilirubin" label="血清总胆红素" required>
						<uni-easyinput type="digit" v-model="formData.serumTotalBilirubin" placeholder="请输入内容" maxlength="10">
							<template #right>
								<view class="suffix">μmol/L</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>

					<!-- 血清白蛋白 -->
					<uni-forms-item name="serumAlbumin" label="血清白蛋白" required>
						<uni-easyinput type="digit" v-model="formData.serumAlbumin" placeholder="请输入内容" maxlength="10">
							<template #right>
								<view class="suffix">g/L</view>
							</template>
						</uni-easyinput>

					</uni-forms-item>

					<!-- 血清丙氨酸转氨酶 -->
					<uni-forms-item name="serumAlanineAminotransferase" label="血清丙氨酸转氨酶" required>
						<uni-easyinput type="digit" v-model="formData.serumAlanineAminotransferase" placeholder="请输入内容" maxlength="10">
							<template #right>
								<view class="suffix">U/L</view>
							</template>
						</uni-easyinput>

					</uni-forms-item>

					<!-- 血清肌酐 -->
					<uni-forms-item name="serumCreatinine" label="血清肌酐" required>
						<uni-easyinput type="digit" v-model="formData.serumCreatinine" placeholder="请输入内容" maxlength="10">
							<template #right>
								<view class="suffix">μmol/L</view>
							</template>
						</uni-easyinput>
					</uni-forms-item>
				</uni-forms>

				<!-- 按钮区域 - 评估和重置按钮放在一行 -->
				<view class="buttons-container">
					<button class="assess-button-bottom" @click="assessRisk">评估</button>
				</view>
			</view>
		</view>

		<!-- 评估结果部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-icon">
					<image src="/static/svg/icon-result.svg" mode="aspectFit" style="width: 18px; height: 18px"></image>
				</view>
				<text class="section-title">评估结果</text>
			</view>
			<view class="section-content">
				<view class="result-item">
					<text class="result-label">当前患者风险等级：</text>
					<text class="result-value" :class="riskLevelClass">{{ riskLevel }}</text>
				</view>
			</view>
		</view>

		<!-- 治疗推荐部分 -->
		<view class="section">
			<view class="section-header">
				<view class="section-icon">
					<image src="/static/svg/icon-recommend.svg" mode="aspectFit" style="width: 18px; height: 18px">
					</image>
				</view>
				<text class="section-title">治疗推荐</text>
			</view>
			<view class="section-content">
				<text class="recommendation-text">{{ recommendation }}</text>
			</view>
		</view>
	</view>
</template>



<script>
	import {
		assessment
	} from '@/api/assessment.js'
	import {
		toast
	} from '@/utils/common'
	export default {
		name: 'MedicalAssessment',
		data() {
			return {
				// 疾病选项 - 是表示1，否表示0
				diseaseOptionsData: [{
						text: '否',
						value: '0'
					},
					{
						text: '是',
						value: '1'
					}
				],
				// 表单数据
				formData: {
					diabetes: '0',
					hepatocellularCarcinoma: '0',
					serumTotalBilirubin: '', // 血清总胆红素水平
					serumAlbumin: '', //血清白蛋白水平
					serumAlanineAminotransferase: '', // 血清丙氨酸转氨酶（
					serumCreatinine: '' //血清肌酐
				},
				// 表单验证规则
				rules: {
					diabetes: {
						rules: [{
							required: true,
							errorMessage: '请选择糖尿病情况',

						}],
					},
					hepatocellularCarcinoma: {
						rules: [{
							required: true,
							errorMessage: '请选择肝细胞癌',

						}],
					},
					serumTotalBilirubin: {
						rules: [{
							required: true,
							errorMessage: '请输入血清总胆红素',
						},{
							validator: (rule, value, callback) => {
								if (value === '' || value === null || value === undefined) {
									callback('请输入血清总胆红素');
								} else if (parseFloat(value) < 0) {
									callback('请输入非负数');
								} else {
									callback();
								}
							}
						}],
					},
					serumAlbumin: {
						rules: [{
							required: true,
							errorMessage: '请输入血清白蛋白',
						},{
							validator: (rule, value, callback) => {
								if (value === '' || value === null || value === undefined) {
									callback('请输入血清白蛋白');
								} else if (parseFloat(value) < 0) {
									callback('请输入非负数');
								} else {
									callback();
								}
							}
						}],
					},
					serumAlanineAminotransferase: {
						rules: [{
							required: true,
							errorMessage: '请输入血清丙氨酸转氨酶',
						},{
							validator: (rule, value, callback) => {
								if (value === '' || value === null || value === undefined) {
									callback('请输入血清丙氨酸转氨酶');
								} else if (parseFloat(value) < 0) {
									callback('请输入非负数');
								} else {
									callback();
								}
							}
						}],
					},
					serumCreatinine: {
						rules: [{
							required: true,
							errorMessage: '请输入血清肌酐',
						},{
							validator: (rule, value, callback) => {
								if (value === '' || value === null || value === undefined) {
									callback('请输入血清肌酐');
								} else if (parseFloat(value) < 0) {
									callback('请输入非负数');
								} else {
									callback();
								}
							}
						}],
					}

				},
				// 评估结果
				riskLevel: '未评估',
				riskScore: -1,
				// 治疗推荐文本
				recommendation: '请结合临床'
			}
		},
		computed: {
			// 根据风险等级动态设置样式类
			riskLevelClass() {
				switch (this.riskScore) {
					case 0:
						return 'low-risk';
					case 1:
						return 'medium-risk';
					case 2:
						return 'high-risk';
					default:
						return '';
				}
			}
	},
	watch: {
		'formData.serumTotalBilirubin'(newValue) {
			this.handlePositiveNumberByWatch('serumTotalBilirubin', newValue);
		},
		'formData.serumAlbumin'(newValue) {
			this.handlePositiveNumberByWatch('serumAlbumin', newValue);
		},
		'formData.serumAlanineAminotransferase'(newValue) {
			this.handlePositiveNumberByWatch('serumAlanineAminotransferase', newValue);
		},
		'formData.serumCreatinine'(newValue) {
			this.handlePositiveNumberByWatch('serumCreatinine', newValue);
		}
	},
	methods: {
		// 通过watch实现非负数输入限制
		handlePositiveNumberByWatch(field, value) {
			// 确保值是字符串类型
			value = String(value);
			
			// 使用正则表达式保留数字和小数点，移除负号和其他非数字字符
			const filteredValue = value.replace(/[^0-9.]/g, '');
			
			// 确保只有一个小数点
			const parts = filteredValue.split('.');
			let cleanValue = filteredValue;
			if (parts.length > 2) {
				cleanValue = parts[0] + '.' + parts.slice(1).join('');
			}
			
			// 只有当值发生变化时才更新，避免无限循环
			if (cleanValue !== this.formData[field]) {
				this.$nextTick(() => {
					this.formData[field] = cleanValue;
				});
			}
		},

				
			// 评估风险等级
			assessRisk() {
				// 使用uni-forms的validate方法进行表单验证
				this.$refs.form.validate().then(async res => {
					uni.showLoading({
						title: '正在提交...'
					});
					try {
						const result = await assessment(this.formData)
						if (result.code === 200) {
							toast('评估成功');
							//1-低风险 2-中风险 3-高风险
							this.riskScore  = result.data.risk;
							this.riskLevel  = result.data.riskLevel || '未评估';
						}
					} finally {
						uni.hideLoading();
					}
				});
			},
		},
	}
</script>

<style scoped>
	.medical-assessment-container {
		min-height: 100vh;
		padding: 15px;
		background-color: #f5f5f5;
		overflow-y: auto;
	}

	.section {
		margin-bottom: 15px;
		overflow: hidden;
		background-color: #fff;
		border-radius: 8px;
	}
	
	.suffix{
		margin-right: 5px;
		width:45px;
		text-align: center;
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 12px 15px;
		color: #000;
		background-color: white;
		line-height: 1;
	}

	.section-icon {
		margin-right: 8px;
		font-size: 18px;
	}

	.section-icon image {
		width: 18px;
		height: 18px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
	}

	.section-content {
		padding: 15px;
	}

	/* 风险评估部分 */
	.risk-assessment {
		display: flex;
		align-items: center;
	}

	.risk-text {
		font-size: 14px;
		color: #333;
	}

	/* 结果部分 */
	.result-item {
		display: flex;
		align-items: center;
	}

	.result-label {
		font-size: 14px;
		color: #333;
	}

	.result-value {
		margin-left: 5px;
		font-size: 14px;
		font-weight: bold;
	}

	.low-risk {
		color: #07c160;
	}

	.medium-risk {
		color: #ff9500;
	}

	.high-risk {
		color: #ff3b30;
	}

	/* 推荐部分 */
	.recommendation-text {
		font-size: 14px;
		color: #333;
	}

	/* 占位文本样式 */
	input::placeholder {
		font-size: 14px;
		color: #999;
	}

	/* uni-forms 相关样式 */
	.uni-forms-item {
		margin-bottom: 18px;
	}

	.uni-forms-item__label {
		font-size: 14px;
		color: #333;
		padding-right: 10px;
	}

	.uni-forms-item__content {
		flex: 1;
	}

	/* 错误提示样式 */
	.uni-forms-item__error {
		font-size: 12px;
		color: #ff3b30;
		margin-top: 4px;
		margin-bottom: 6px;
		display: block;
	}

	/* 风险评估标题样式 */
	.risk-assessment {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.risk-assessment uni-icons {
		margin-right: 5px;
	}

	.risk-text {
		font-size: 14px;
		color: #333;
	}

	/* 按钮容器样式 */
	.buttons-container {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	/* 底部评估按钮样式 */
	.assess-button-bottom {
		width: 100%;
		max-width: 100px;
		background-color: #0083ff;
		color: #fff;
		font-size: 16px;
		/* padding: 8rpx 0; */
		border-radius: 5px;
		border: none;
		margin-right: 0;
		box-sizing: border-box;
	}


</style>